<include file="/public/header"/>
<style>
    .layui-row {
        overflow: hidden;
        margin-bottom: 10px;
    }

    .echartsOrder {
        margin-right: 10px;
    }

    .echartsOrder:hover, .echartsOrder.active {
        color: #1890ff;
    }
</style>

<div class="layui-fluid ">

    <div class="layui-row layui-col-space10">

        <div class="layui-col-md8">
            <!-- 填充内容 -->
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 20px;">
                    <div class="layui-row">
                        <div class="layui-col-md8">
                            <img src="{$AdminLogin.face}" class="layui-admin-avatar">
                            <div class="layui-admin-content">
                                <span class="h4">欢迎您，{$AdminLogin.nickname|default=$AdminLogin.name}，开始您一天的工作吧！</span>
                                <span>今日多云转阴，18℃ - 22℃，出门记得穿外套哦~</span>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-admin-workplace">
                                <div class="workplace-header">
                                    <span><i class="layui-icon layui-icon-list"></i>通知</span>
                                </div>
                                <div class="workplace-content">{$workplace.notice|default=26}</div>
                            </div>

                            <div class="layui-admin-workplace">
                                <div class="workplace-header">
                                    <span><i class="layui-icon layui-icon-date date"></i>待办项</span>
                                </div>
                                <div class="workplace-content">{$todoList}/{$workplace.todo}</div>
                            </div>
                            <div class="layui-admin-workplace">
                                <div class="workplace-header">
                                    <span><i class="layui-icon layui-icon-notice notice"></i>消息</span>
                                </div>
                                <div class="workplace-content">{$workplace.message|default="2,352"}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 20px;">
                    <div style="height: 78px">
                        <ul>
                            <a href="javascript:;" class="workplace-action" sa-event="tabs"
                               data-url="{:url('/system/plugin/index')}"
                               title="插件管理">插件管理</a>
                            <a href="javascript:;" class="workplace-action" sa-event="tabs"
                               data-url="{:url('/system/attachment/index')}"
                               title="附件管理">附件管理</a>
                            <a href="javascript:;" class="workplace-action" sa-event="tabs"
                               data-url="{:url('/system/dictionary/index')}"
                               title="字典管理">字典管理</a>
                            <a href="javascript:;" class="workplace-action" sa-event="tabs"
                               data-url="{:url('/system/department/index')}"
                               title="部门管理">部门管理</a>
                            <a href="javascript:;" class="workplace-action" sa-event="tabs"
                               data-url="{:url('/system/jobs/index')}"
                               title="岗位管理">岗位管理</a>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space10" style="margin-bottom: 0;">

        <div class="layui-col-md4">
            <div class="layui-row layui-col-space10" style="margin-bottom: 5px;">
                <div class="layui-col-xs6 layui-col-sm6">
                    <div class="layui-card smallblock" sa-event="tabs" data-url="{:url('/system/User/index')}"
                         data-title="{:__('会员管理')}">
                        <div class="layui-card-body">
                            <div class="layui-small-block">
                                <div><i class="layui-icon fa-user"></i></div>
                                <div class="layui-small-block-title">用户</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm6">
                    <div class="layui-card smallblock" sa-event="tabs" data-url="{:url('/Index/analysis')}"
                         data-title="{:__('分析页')}">
                        <div class="layui-card-body">
                            <div class="layui-small-block">
                                <div><i class="layui-icon fa-line-chart " style="color: #b0e689"></i></div>
                                <div class="layui-small-block-title">分析</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-row layui-col-space10" style="margin-bottom: 5px;">
                <div class="layui-col-xs6 layui-col-sm6">
                    <div class="layui-card smallblock" sa-event="tabs" data-url="{:url('/Index/monitor')}"
                         data-title="{:__('监控页')}">
                        <div class="layui-card-body">
                            <div class="layui-small-block">
                                <div><i class="layui-icon layui-icon-chart-screen" style="color: #fe9c6e"></i></div>
                                <div class="layui-small-block-title">监控</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm6">
                    <div class="layui-card smallblock" sa-event="tabs" data-url="{:url('/system/Dictionary/index')}"
                         data-title="{:__('字典管理')}">
                        <div class="layui-card-body">
                            <div class="layui-small-block">
                                <div><i class="layui-icon fa-th-list" style="color: #b37eeb"></i></div>
                                <div class="layui-small-block-title">字典</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-row layui-col-space10" style="margin-bottom: 5px;">
                <div class="layui-col-xs6 layui-col-sm6">
                    <div class="layui-card smallblock" sa-event="tabs" data-url="{:url('/system/SystemLog/index')}"
                         data-title="{:__('操作日志')}">
                        <div class="layui-card-body">
                            <div class="layui-small-block">
                                <div><i class="layui-icon fa-file-text" style="color: #88e4de"></i></div>
                                <div class="layui-small-block-title">日志</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm6">
                    <div class="layui-card smallblock" sa-event="tabs" data-url="{:url('/Index/baseCfg')}"
                         data-title="{:__('基本设置')}">
                        <div class="layui-card-body">
                            <div class="layui-small-block">
                                <div><i class="layui-icon fa-gear" style="color: #ffc069"></i></div>
                                <div class="layui-small-block-title">设置</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space10">

        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header">注册登录概览
                    <span class="pull-right">
                        <a class="echartsOrder" data-cycle="week">周</a>
                        <a class="echartsOrder" data-cycle="month">月</a>
                        <a class="echartsOrder" data-cycle="year">年</a>
                    </span>

                </div>
                <div class="layui-card-body">
                    <div id="RegisterCharts" style="height: 250px"></div>
                    <div id="RegisterChartsData" style="display: none">{$RegisterChartsOptions|raw}</div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">用户统计（组）</div>
                <div class="layui-card-body">
                    <div id="userGroupCharts" style="height: 250px"></div>
                    <div id="userGroupData" style="display: none">{$userGroupData|raw}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">热搜统计 (CMS)</div>
                <div class="layui-card-body">
                    <div id="searchWordCharts" style="height: 250px;"></div>
                    <div id="searchWordData" style="display: none">{$searchWords|raw}</div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">资产报表</div>
                <div class="layui-card-body" style="height: 250px;overflow: hidden">

                    <div class="layui-col-xs4 layui-col-sm4">
                        <div class="layui-card smallblock">
                            <div class="layui-card-body">
                                <div class="layui-small-block">
                                    <div><i class="layui-icon fa-plug"></i></div>
                                    <div class="layui-small-block-title">本地插件 {$assetsInfo.pluginCount} 个</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-xs4 layui-col-sm4">
                        <div class="layui-card smallblock">
                            <div class="layui-card-body">
                                <div class="layui-small-block">
                                    <div><i class="layui-icon fa-database"></i></div>
                                    <div class="layui-small-block-title">数据表 {$assetsInfo.tableCount} 张</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-xs4 layui-col-sm4">
                        <div class="layui-card smallblock">
                            <div class="layui-card-body">
                                <div class="layui-small-block">
                                    <div><i class="layui-icon fa-file"></i></div>
                                    <div class="layui-small-block-title">附件记录 {$assetsInfo.attachmentCount} 条</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-xs4 layui-col-sm4">
                        <div class="layui-card smallblock">
                            <div class="layui-card-body">
                                <div class="layui-small-block">
                                    <div><i class="layui-icon fa-codepen" style="color: #ee6666"></i></div>
                                    <div class="layui-small-block-title">正在运行 {$assetsInfo.pluginRunning} 个</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-xs4 layui-col-sm4">
                        <div class="layui-card smallblock">
                            <div class="layui-card-body">
                                <div class="layui-small-block">
                                    <div><i class="layui-icon fa-hdd-o" style="color: #ee6666"></i></div>
                                    <div class="layui-small-block-title">数据库 {$assetsInfo.dbSize}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-xs4 layui-col-sm4">
                        <div class="layui-card smallblock">
                            <div class="layui-card-body">
                                <div class="layui-small-block">
                                    <div><i class="layui-icon fa-mixcloud" style="color: #ee6666"></i></div>
                                    <div class="layui-small-block-title">附件大小 {$assetsInfo.attachmentSize}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card" id="console">
                <div class="layui-card-header">DEVOPS 统计<span class="layui-badge layui-badge-blue pull-right">总</span></div>
                <div class="layui-card-body">
                    <div id="devOpsCharts" style="height: 250px;"></div>
                    <div id="devOpsData" style="display: none">{$devOpsData|raw}</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__STATICADMIN__module/echarts/echarts.js"></script>
<script src="__STATICADMIN__module/echarts/echarts-wordcloud.js"></script>
<script src="__STATICADMIN__module/echarts/china.js"></script>

<include file="/public/footer"/>

<script>
    layui.use(['jquery','show'], function () {

        let $ = layui.jquery;
        let show = layui.show;
        
        /**
         * 用户统计报表
         * @type {string}
         */
        let RegisterChartsCharts = echarts.init(document.getElementById('RegisterCharts'));
        RegisterChartsCharts.setOption(JSON.parse($('#RegisterChartsData').text()));
        /**
         * 查询注册报表
         * @param page
         */
        $('.echartsOrder').click(function (e) {
            let that = $(this);
            let cycle = $(this).data('cycle');
            $.ajax({
                url: '{:url("/Index/console")}',
                type: 'post',
                data: {cycle: cycle},
                dataType: 'json',
                success: function (res) {
                    if (res.code === 200) {
                        RegisterChartsCharts.setOption(res.data);
                        $('.echartsOrder').removeClass('active');
                        $(that).addClass('active');
                    }
                    else {
                        show.info(res.msg);
                    }
                }
            })
        })

        /**
         * 组别报表
         * @type {[type]}
         */
        let userGroupCharts = echarts.init(document.getElementById('userGroupCharts'));
        let userGroupOptions = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: '30px',
                top: '30px'
            },
            series: [
                {
                    name: '用户组别',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '14px',
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: JSON.parse($('#userGroupData').text())
                }
            ]
        }
        userGroupCharts.setOption(userGroupOptions);

        /**
         * 搜索词报表
         * @type {[type]}
         */
        var searchWordCharts = echarts.init(document.getElementById('searchWordCharts'));
        var searchWordOption = {
            tooltip: {show: true},
            series: [{
                type: 'wordCloud',
                shape: 'circle',
                keepAspect: false,
                left: 'center',
                top: 'center',
                width: '80%',
                height: '80%',
                right: null,
                bottom: null,
                sizeRange: [12, 23],
                rotationRange: [-90, 90],
                rotationStep: 45,
                gridSize: 6,
                drawOutOfBound: false,
                layoutAnimation: true,
                textStyle: {
                    color: function () {
                        // Random color
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {shadowBlur: 10, shadowColor: '#333'},
                data: JSON.parse($('#searchWordData').text())
            }]
        };

        searchWordCharts.setOption(searchWordOption);
        /**
         * 系统数据报表
         * @type {[type]}
         */
        let devOpsCharts = echarts.init(document.getElementById('devOpsCharts'));
        let devOpsOptions = {
            color: ['#1890ff'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['全部日志', '错误日志', '常规日志', '邮件验证','手机验证',  '用户统计', '登录绑定'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: {
                type: 'value'
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '5%',
                top: '3%',
                containLabel: true
            },
            series: [
                {
                    type: 'bar',
                    barWidth: '50%',
                    data: JSON.parse($('#devOpsData').text())
                }
            ]
        };

        devOpsCharts.setOption(devOpsOptions);
        // 窗口大小改变事件
        window.onresize = function () {
            RegisterChartsCharts.resize();
            devOpsCharts.resize();
            searchWordCharts.resize();
            userGroupCharts.resize();
        };
    })

</script>
</body>
</html>
